
// 引入 createStore
import { createStore } from "vuex";

// 创建store仓库
const store =  createStore({
    // state:{}  也可以这种写法
    //  存放数据的地方： 可以理解为 组件的data选项
    state(){
        return{
            count:1,
            msg:'我是vuex的state',
            tips:'hello vuex'
        }
    },

    // 存放getters的，可以理解为组件的 computed 选项
    getters:{
        /**
         * state就是 当前仓库中的state数据
         * ps: 不能通过this去获取state。必须通过它的第一个参数state
         */ 
        // getters 其实也有很多参数

        plusCount(state,getters,rootState,rootGetters){
            // state  当前的 state
            // getters  当前的 getters
            // rootState   根模块的state，通过它可以获取到别的模块的数据
            // rootGetters  根模块的getters,通过它可以获取到别的模块的数据
            console.log('state',state);
            console.log('getters',getters);
            console.log('rootState',rootState);
            console.log('rootGetters',rootGetters);
            return state.count +1
        },
        reverseTips(state){
            return state.tips.split('').reverse().join(''); //反转tips内容
        },       
    },    


    // 存放 mutations（突变） 的
    // ！！要修改state中的数据，唯一的方法就是， 提交(commit) 一个突变
    // 注意: 一个mutation里面，只能同步地修改 state
    mutations:{ 
        addCount(state,payload){
            // 同步地修改 state  数据
            console.log('payload:',payload);
            state.count +=1;
        },
        subCount(state){
            state.count --;
        },
        jianshao(state,payload){
            state.count -= payload
        },
    },

    // 存放action(动作) 的
    //  ！它与mutation的不同之处是， 它可以进行异步操作。
    //  它不能直接修改state。如果异步操作结束，要修改state。可再调用一个mutation来实现
    actions:{ 
        asyncAddCount(context,payload){
            // context 是一个上下文对象，里面有如下的属性和方法，可以简单理解为 是一个$store
            /*
                1. state  当前的state
                2. getters  当前的getters
                3. commit()   提交突变mutation 的方法
                4. dispatch()  派发动作action 的方法
                5. rootState   根仓库的 state
                6. rootGetters  根仓库的 getters
                 payload 是派发这个动作action时，传递的参数
            */ 

            console.log('context',context);
            console.log('payload',payload);

            // 异步操作
            setTimeout(() => {
                // 让count++
                /* 这里的 context中虽然可以获取 state 数据，也可以修改，但是不推荐这样操作;
                    要修改的话，可以通过 context.commit() 去提交一个对应的mutation 来修改
                */ 
                context.commit('addCount');                
            }, 2000);
        },

        // 对 context中要用的东西做解构
        asyncSubCount({ commit }){
            setTimeout(()=>{
                commit('subCount')
            },2000)
        }
    },


    // 存放 module (仓库子模块)的
    //  项目做大了之后，state里面的数据就不好维护了，这是可以使用module 将仓库拆分。（只有需要共享的数据才有必要拆分）
    modules:{ }
}) 

// 导出store
export default store;
